<!--统计中间板块-->
<template>
    <div class="globalCenter">
        <div class="fl">
            <div class="box1">
                <CustomStatisticsWebCenterFuture></CustomStatisticsWebCenterFuture>
            </div>
            <div class="fl_box">
                <div class="fl_box_1">
                    <CustomStatisticsWebCenterTadayEmissions text="废水监测"></CustomStatisticsWebCenterTadayEmissions>
                </div>
                <div class="fl_box_2">
                    <CustomStatisticsWebCenterTadayEmissions text="废气监测"></CustomStatisticsWebCenterTadayEmissions>
                </div>
                <div class="fl_box_3">
                    <common-border-large width="100%" text="重大危险源" height="100%">
                        <CustomSafetySpySiderLeftMajorHazar></CustomSafetySpySiderLeftMajorHazar>
                    </common-border-large>
                </div>
                <div class="fl_box_4">
                    <common-border-large width="100%" text="单元分类" height="100%">
                        <CustomSafetySpySiderLeftUnitClass></CustomSafetySpySiderLeftUnitClass>
                    </common-border-large>
                </div>
            </div>
        </div>

        <div class="fr" @click="ha">
            <common-border-large width="100%" text="车辆" height="100%">
                <!--近7天车辆进出统计-->
                <CustomStatisticsWebCenterCarout></CustomStatisticsWebCenterCarout>
                <!--各卡口车辆出入数量及占比-->
                <CustomStatisticsWebCenterCarProtion></CustomStatisticsWebCenterCarProtion>
                <!--园区当前车辆-->
                <CommonTitleComponentTitleCategory text="园区当前车辆"></CommonTitleComponentTitleCategory>
                <CustomStatisticsWebCenterCarutils
                    class="model"
                    :datalist="status.datalist"
                ></CustomStatisticsWebCenterCarutils>
                <!--园区当前车辆3D饼图-->
                <CustomStatisticsWebCenterCarCricile></CustomStatisticsWebCenterCarCricile>
            </common-border-large>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import renderPopconfirmComponent from '@/components/common/Popconfirm/index';
import test from './test.vue';
import test1 from './test123.vue';

const status = reactive({
    datalist: {
        name: '危化品车辆',
        quantity: 10,
        complianceRate: 70
    }
});

const ha = () => {
    renderPopconfirmComponent(
        {
            title: '123',
            showPop: true,
            isChildren: true,
            childrenProps: {
                title: '子标题',
                w: '30%',
                zIndex: 99,
                showPop: true,
                compoent: test1
            }
        },
        test
    );
};
</script>

<style scoped lang="scss">
.globalCenter {
    color: #fff;
    position: absolute;
    width: calc(100% - 40% - 32px);
    left: calc(20% + 16px);
    right: calc(20% + 16px);
    height: 76%;
    top: 160px;
    z-index: 2;
    display: flex;
    justify-content: space-between;
}
.fl {
    width: calc(70% - 17px);
    height: 100%;
    .box1 {
        width: 100%;
        height: 35%;
    }
    .fl_box {
        width: 100%;
        height: calc(65% - 14px);
        margin-top: 14px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        > div {
            width: calc(50% - 8px);
            height: 40%;
        }
        .fl_box_1,
        .fl_box_2 {
            margin-bottom: 17px;
            height: 57%;
        }
        .fl_box_3 {
            ::v-deep(.equipment_statistics_echarts) {
                top: -11px;
            }
            ::v-deep(.statistics) {
                margin-top: 0 !important;
                > div {
                    margin-bottom: 12px;
                }
            }
        }
        .fl_box_4 {
            ::v-deep(.equipment_statistics_echarts) {
                top: 20px;
            }
            ::v-deep(.statistics) {
                margin-top: -14px;
            }
        }
    }
}
.fr {
    height: 100%;
    width: 30%;
    .model {
        margin-top: 12px;
        height: 5%;
        margin-bottom: 45px;
    }
}
</style>
